<template>
	<view style="background-color: #F7F8FA;">
		
		<view class="conterCon">
			<Header></Header>
			<view class="borde-padd-24">
				<view class="ai-conter-list">
					<view class="conter-sli flex-content flex-line-height">
						<view class="c-list-aoo active flex-line-height">
							<view class="l">1</view>
							<view class="r">描述题({{dataForm.length}})</view>
						</view>
						<!-- #3B5EEC -->
						<!-- <view class="c">
							<view class="actve"></view>
						</view>
						<view class="c-list-aoo flex-line-height">
							<view class="l">2</view>
							<view class="r">终测题(1)</view>
						</view> -->
					</view>
					<view class="comTer-conter">
						<view class="flex-content ">
							<text class="tn">{{tabIndex+1}}</text>/{{dataForm.length}}
						</view>
						<view class="suss">
							<view class="active" :style="{
								width:100/dataForm.length*(tabIndex+1)+'%'
							}"></view>
						</view>
					</view>
					<!-- *基于您的测试结果+AI算法动态生成，再次效验结果准确度 -->
				</view>
				<view class="ai-conter-list" v-if="dataForm[tabIndex]">
					<view class="title">
						{{dataForm[tabIndex].title}}
					</view>
					<view style="display: flex;justify-content: space-between;flex-wrap: wrap;">
						<view class="tc-left-conter" v-for="(item,index) in dataForm[tabIndex].details" @click="conterList(index)">
							<!-- isTab -->
							<view class="biatoxia-conter">
								<view class="xuanXisn " :class="{
									active:dataForm[tabIndex].isTab==index
								}">选项 
									{{index==0?'A':''}}
									{{index==1?'B':''}}
									{{index==2?'C':''}}
									{{index==3?'D':''}}
									{{index==4?'E':''}}
									{{index==5?'F':''}}
									{{index==6?'G':''}}
								</view>
								<view class="conterArrClisy"
								:class="{
									active:dataForm[tabIndex].isTab==index
								}"
								>
									{{item}}
								</view>
							</view>
						</view>
						
					</view>
					<!-- <view class="sub-title">
						请选择你认为符合的选项
					</view> -->
					<!-- <view class="flex-line-height">
						<view class="actibe-list active flex-line-height flex-content">
							<view class="">
								<view class="">非常像</view>
								<view>A</view>
							</view>
						</view>
						<view class="actibe-list tengArrs flex-line-height flex-content">
							<view >
								<view class="">比较像</view>
								<view>A</view>
							</view>
						</view>
						<view class="actibe-list tabCon flex-line-height flex-content">
							<view>
								<view class="">比较像</view>
								<view>B</view>
							</view>
						</view>
						<view class="actibe-list tabCon flex-line-height flex-content">
							<view>
								<view class="">非常像</view>
								<view>B</view>
							</view>
						</view>
						
					</view> -->
				</view>
				<!--  -->
				<view class="cont-su">
					完成测试后，您可以获得
				</view>
				<view class="flex-height-between flex-wrap">
					<view class="cont-su-list">获取您的4字母类型测试结果</view>
					<view class="cont-su-list">发现适合您性格类型的职业</view>
					<view class="cont-su-list">知悉您的偏好优势和类型描述</view>
					<view class="cont-su-list">评估您与恋人的长期相处情况</view>
					<view class="cont-su-list">了解您的沟通风格和学习风格</view>
					<view class="cont-su-list">查看与您分享同一性格的名人</view>
				</view>
			</view>
			
		</view>
		
		<view class="flex-height-between footer-conter">
			<view class="shanguyiti" @click="xiaytiTyscons">上一题</view>
			<view class="tijiao" @click="appraisalsaveAppraisal">保存</view>
			<view class="xianyiti" v-if="tabIndex+1!=dataForm.length" @click="xiaytiContee">下一题</view>
			<view class="xianyiti" v-if="tabIndex+1==dataForm.length" @click="huoquJieguo">获取结果</view>
			<!--  -->
		</view>
	</view>
	
</template>

<script>
	import Header from "./header.vue"
	
	// /api/appraisal/getBmtiList
	import {
		Request
	} from '@/utils/request.js'
	export default{
		components:{
			Header
		},
		data(){
			return {
				dataForm:[],
				keyIndex:{},
				tabIndex:0,
				id:'',
				type:"",
			}
		},
		onLoad({type}) {
			this.type=type;
			this.appraisalgetBmtiList();
			// /api/appraisal/getAppraisal
		},
		methods:{
			tijiaoHanshu(){
				let dataForm=this.dataForm;
				dataForm.map((item,index)=>{
					item.isTab
				})
			},
			
			appraisalgetAppraisal(answer){
				let keyIndex=this.keyIndex;
				let dataForm=this.dataForm;
				Request('appraisal/getAppraisal',{
					type:this.type
				}).then(({answer})=>{
					answer.map((item,index)=>{
						dataForm[keyIndex[item[0]]].isTab=item[1]
					})
					this.tabIndex=answer.length;
					this.dataForm=[
						...dataForm
					]
				})
				// 
			},
			appraisalexamReport(answer=[]){
				// 
				uni.navigateTo({
					url:'baogao?type='+this.type+'&id='+this.id
				})
				// Request('appraisal/examReport',{
				// 	answer:answer.join(',')
				// },'post').then((res)=>{
					
				// })
				// 
			},
			// /api/appraisal/examReport
			huoquJieguo(){
				let dataForm=this.dataForm;
				let answer=[];
				dataForm.map((item,index)=>{
					let {isTab,detailsId}=item;
					answer.push(detailsId+'-'+(isTab))
				})
				this.appraisalexamReport(answer)
			},
			appraisalgetBmtiList(){
				Request('appraisal/getBmtiList',{
					type:this.type,
				}).then((res)=>{
					this.dataForm=res;
					let keyIndex={};
					res.map((item,index)=>{
						keyIndex[item.detailsId]=index;
					})
					this.keyIndex=keyIndex;
					if(uni.getStorageSync('token')){
						this.appraisalgetAppraisal()
					}
				})
			},
			// 答案，格式：题目detailsId-题目答案选项索引值,题目detailsId2-题目答案选项索引值2,...。题目答案选项索引值从0开始
			
			// /api/appraisal/saveAppraisal
			xiaytiContee(){
				if(this.dataForm[this.tabIndex].isTab!=undefined){
					this.appraisalsaveAppraisal(true);
					this.tabIndex=this.tabIndex+1;
					if(this.dataForm.length-1<=this.tabIndex){
						this.tabIndex=this.dataForm.length-1;
					}
					
				}else{
					uni.showToast({
						title:'请选择你的答案',
						icon:'none'
					})
				}
				
			},
			appraisalsaveAppraisal(_true){
				if(this.dataForm[this.tabIndex].isTab!=undefined){
					let dataForm=this.dataForm;
					let answer=[];
					dataForm.map((item,index)=>{
						let {isTab,detailsId}=item;
						if(isTab!=undefined){
							answer.push(detailsId+'-'+(isTab))
						}
					})
					Request('appraisal/saveAppraisal',{
						answer:answer.join(','),
						isLoding:true,
						type:this.type,
					},"post").then((res)=>{
						//console.log(res);
						this.id = res;
						uni.showToast({
							title:'成功',
							icon:'none'
						})
					})
				}else if(_true!=true){
					uni.showToast({
						title:'请选择你的答案',
						icon:'none'
					})
				}
				
				// 
			},
			conterList(active){
				this.dataForm[this.tabIndex].isTab=active;
				console.log(this.dataForm[this.tabIndex].isTab)
				this.dataForm=[...this.dataForm];
				let {title,detailsId}=this.dataForm[this.tabIndex];
				// this.appraisalsaveAppraisal(detailsId+'-'+(active))
			},
			xiaytiTyscons(){
				if(this.tabIndex>=0){
					this.tabIndex=this.tabIndex-1;
				}else{
					this.tabIndex=0;
				}
				// 		<!-- 答案，格式：题目detailsId-题目答案选项索引值,题目detailsId2-题目答案选项索引值2,...。题目答案选项索引值从0开始 -->
			},
			goPages(path){
				uni.navigateBack({ delta: 1 })
				// uni.redirectTo({url: '/logon/logon/index'}) 
			},
			xiayitiCite(){
				
			}
			// 
		}
	}
</script>

<style scoped>
	.conterActis{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
	}
	.conterCon{
		padding-top: 90rpx;
		background: linear-gradient( 180deg, rgba(59,94,236,0.2) 0%, rgba(59,94,236,0) 100%);
		background-size: 100% 400rpx;
		background-repeat: no-repeat;
		min-height: 100vh;
	}
	.ai-conter-list{
		background: rgba(255,255,255,0.7);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 1rpx solid #FFFFFF;
		padding:32rpx;
		box-sizing: border-box;
		margin-bottom: 16rpx;
	}
	.ai-conter-list .title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		padding-bottom: 34rpx;
		font-size: 36rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.conteLisy{
		width: 727rpx;
		margin: 0 auto;
		height: 1253rpx;
		margin-top: 120rpx;
	}
	.title{
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.tijiao{
		width: 222rpx;
		height: 80rpx;
		background: #32D999;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.fanhui{
		position: fixed;
		left: 40rpx;
		top: 60rpx;
		border-radius: 50%;
		text-align: center;
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #000;
		font-size: 22rpx;
		background-color: rgba(255, 255, 255, .6);
	}
	.c-list-aoo.active .r{
		color: #3B5EEC !important;
	}
	.c-list-aoo.active  .l{
		background: #3B5EEC;
		color: #FFFFFF;
	}
	.c-list-aoo .l{
		width: 32rpx;
		height: 32rpx;
		text-align: center;
		margin-right: 8rpx;
		background: #E1E4E8;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 22rpx;
		border-radius: 50%;
		color: #8F9294;
		line-height: 32rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.c-list-aoo .r{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.ai-conter-list .c{
		width: 100rpx;
		height: 2rpx;
		margin: 0 37rpx;
		background: #E1E4E8;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.ai-conter-list .actve{
		width: 50rpx;
		height: 2rpx;
		background: #3B5EEC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.comTer-conter{
		padding-top: 32rpx;
	}
	.comTer-conter .flex-content{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #8F9294;
		font-style: normal;
		text-transform: none;
	}
	.comTer-conter .tn{
		color: #3B5EEC !important;
	}
	.comTer-conter .suss{
		width: 638rpx;
		height: 8rpx;
		background: #E1E4E8;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	.comTer-conter .suss .active{
		width: 192rpx;
		height: 8rpx;
		background: #3B5EEC;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	.biatoxia-conter{
		width: 310rpx;
		background: #F7F8FA;
		margin-bottom: 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	
	.tc-left-conter .xuanXisn,.tc-right-conter .xuanXisn{
		background: #E1F4EC;
	}
	/* .tc-left-conter .xuanXisn.active{
		background: #E5E8F7;
		color: #3B5EEC;
	}
	.tc-right-conter .xuanXisn.active{
		background: #E5E8F7;
		color: #3B5EEC;
	} */
	.tc-left-conter .xuanXisn.active{
		background: #3B5EEC;
		color: #fff;
	}
	.tc-right-conter .xuanXisn.active{
		background: #3B5EEC;
		color: #fff;
	}
	.conterArrClisy.active{
		background: #E5E8F7;
		color: #3B5EEC;
	}
	/*  */
	.xuanXisn{
		width: 310rpx;
		height: 56rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		box-sizing: border-box;
		font-size: 28rpx;
		padding: 0 24rpx;
		line-height: 56rpx;
		font-style: normal;
		text-transform: none;
	}
	.conterArrClisy{
		padding: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #646669;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.sub-title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #646669;
		margin-top: 24rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		border-top: 1rpx solid #E1E4E8;
		padding-bottom: 24rpx;
		padding-top: 24rpx;
	}
	.actibe-list{
		/* width: 118rpx; */
		flex: 1;
		height: 118rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid #C1C4C7;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		/* color: #32D999; */
		font-style: normal;
		margin-right: 12rpx;
		text-transform: none;
	}
	.actibe-list.tengArrs{
		color: #3B5EEC;
	}
	.actibe-list.conter{
		color: #8F9294;
	}
	.actibe-list.tabCon{
		color:#32D999
	}
	.actibe-list.active{
		border-color: #3B5EEC;
		color: #FFFFFF;
		background-color: #3B5EEC;
	}
	
	.actibe-list .c-title{
		
	}
	.footer-conter{
		width: 100%;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0,0,0,0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 20rpx 24rpx !important;
		padding-bottom: 40rpx !important;
	}
	.cont-su{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.cont-su-list{
		width: 344rpx;
		height: 56rpx;
		background: rgba(255,255,255,0.7);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		margin-top: 16rpx;
		font-size: 22rpx;
		color: #8F9294;
		line-height: 56rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.xianyiti{
		background: #3B5EEC;
		color: #FFFFFF;
	}
	.shanguyiti{
		background-color: #F2F4F7;
		color: #646669;
	}
	.xianyiti,.shanguyiti{
		width: 222rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		/* color: #646669; */
		font-style: normal;
		text-transform: none;
		/* background: #3B5EEC; */
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
</style>
